<template>
  <div class="app-container">
    <el-card>
      <el-form style="width: 600px;">

        <el-form ref="dataForm" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
          <el-form-item v-for="(item,i) in uiList" :key="i"  :label="item.name" :prop="item.id">
            <el-input
              v-if="item.type.name=='string'"
              v-model="form[item.id]"
              size="small"
              style="width: 200px; "
              class="filter-item"
              clearable
            />
            <el-date-picker
              v-else-if="item.type.name=='date'"
              v-model="form[item.id]"
              type="date"
              value-format="yyyy-MM-dd"
              align="left"
              unlink-panels
              size="small"
              class="filter-item"
            />
          </el-form-item>
        </el-form>

        <el-form-item>
          <el-button type="primary" @click="handleStartProc" style="margin-left: 200px;">
            提交&发起流程
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {queryStartFormProperties, startProc} from './api/tmpt'

export default {
    name: 'TmptFormInput',
    components: {},
    data() {
        return {
            procDefKey: "Leave",
            form:{},
            uiList:[],
        }
    },
    computed: {
    },
    mounted() {
        this.initUI();
    },
    methods: {
        initUI() {
            queryStartFormProperties({"procDefKey":this.procDefKey}).then(r => {
                this.uiList = r.list
            })
        },
        // start a process
        handleStartProc() {
            const procDef = {}
            procDef.key = this.procDefKey
            procDef.name = "data.procDefName"
            procDef.userId = "1"
            procDef.formData = JSON.stringify(this.form)
            startProc(procDef).then(r => {
                this.notify(r)
            })
        }
    }
}
</script>
